<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<center>
    <form id="login" action="${pageContext.request.contextPath}/ajax.do" method="get">
        用户名：<input type="text" name="uname"><br>
        密  码：<input type="password" name="pwd"><br>
        <input type="button" value="登 录" onclick="funAjax()">
    </form><br>

    <h2 id="hajax"></h2>
</center>
</body>

    <script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>

    <script type="application/javascript">
        // 写javaScript代码
        function funAjax(){

            // 获取表单数据
            var data = $("#login").serialize();

            $.ajax({
                url: "${pageContext.request.contextPath}/ajax.do", // 请求链接地址，字符串表示
                data: data, // 请求数据，格式为{A: '...', B: '...'}
                type: "GET", // 请求类型
                dataType: "json", // 服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
                success: function(result) { // 请求成功后，服务器回调的函数
                    // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                    console.log(result);
                    var h2 = document.getElementById("hajax");
                    h2.innerText = result.map.name;
                    h2.innerText = h2.innerText+result.list[2];
                }
            });
        }
    </script>

</html>
